<script>
export default {
  name: 'DynamicFormComponent',
  props: {
    type: {
      type: String,
      validator: value => ['input', 'textarea', 'select', 'check', 'radio', 'table'].includes(value)
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    selectItemSources: {
      type: Array,
      default: () => {
        return [
          {
            label: '选择项',
            value: '选择项'
          }
        ]
      }
    },
    checkItemSources: {
      type: Array,
      default: () => {
        return [
          {
            label: '复选框',
            value: '复选框'
          }
        ]
      }
    },
    radioItemSources: {
      type: Array,
      default: () => {
        return [
          {
            label: '单选框',
            value: '单选框'
          }
        ]
      }
    },
    tableArray: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleEditClick() {},
    handleMouseClick() {
      this.$emit('setCurrent', 0)
    },
    handleInputChange() {
      let hasValueRow = 0
      for (let i = 0; i < this.tableArray.length; i++) {
        const item = this.tableArray[i]
        if(item['key'] != null && item['key'] !== '' || item['value'] != null && item['value'] !== '') {
          hasValueRow++
        }
      }
      if(hasValueRow === this.tableArray.length) {
        this.tableArray.push({
          key: '',
          value: ''
        })
      }
    }
  }
}
</script>

<template>
  <div class="dynamic-form-component-container">
    <el-input v-if="type === 'input'" :placeholder="placeholder" size="small" />
    <el-input v-if="type === 'textarea'" type="textarea" :rows="3" :placeholder="placeholder" size="small" />
    <el-select v-if="type === 'select'" :placeholder="placeholder" size="small">
      <el-option v-for="(selectSource, selectSourceIndex) in selectItemSources" :key="'option_' + selectSourceIndex" :label="selectSource['label']" :value="selectSource['value']" />
    </el-select>
    <el-checkbox-group v-if="type === 'check'">
      <el-checkbox v-for="(checkSource, checkSourceIndex) in checkItemSources" :key="'check_' + checkSourceIndex" :label="checkSource['value']">{{ checkSource['label'] }}</el-checkbox>
    </el-checkbox-group>
    <el-radio-group v-if="type === 'radio'">
      <el-radio v-for="(radioSource, radioSourceIndex) in radioItemSources" :key="'radio_' + radioSourceIndex" :label="radioSource['value']">{{ radioSource['label'] }}</el-radio>
    </el-radio-group>
    <table class="table" v-if="type === 'table'" style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <th>
          <span>列名称</span>
        </th>
        <th>
          <span>列答案</span>
        </th>
      </tr>
      <tr v-for="(row, rowIndex) in tableArray" :key="'table_row_' + rowIndex">
        <td>
          <el-input v-model="row['key']" @change="handleInputChange" />
        </td>
        <td>
          <el-input v-model="row['value']" @change="handleInputChange" />
        </td>
      </tr>
    </table>
    <p v-if="type === 'p'" class="element-p-design" />
    <div class="pos-tool">
      <div class="tool-button" @click="handleEditClick">
        <i class="el-icon-edit-outline" />
      </div>
      <div class="tool-button" @click="handleMouseClick">
        <i class="el-icon-mouse" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dynamic-form-component-container {
  position: relative;

  .table {
    border: 1px solid #f4f4f4;
    tr {
      td {
        border: 1px solid #f4f4f4;
        padding: 4px 8px;
      }
    }
  }

  .element-p-design {
    user-select: none;
    cursor: pointer;
  }

  .pos-tool {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .tool-button {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: 1px solid #d4d4d4;
      border-radius: 4px;
      user-select: none;
      cursor: pointer;
    }
  }
}
</style>
